<template>
    <div>
        <el-form :model="form" :rules="rules" label-width="100px" ref="form1">
            <el-form-item prop="realName" label="任务名称">
                <el-input v-model="form.realName"></el-input>
            </el-form-item>
            <el-form-item prop="roleIds" label="角色">
                <el-select v-model="form.roleIds" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.value[0]" 
                     
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">确定</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { guanliyuangai } from '@/api';

export default {
    data() {
        return {
            form: {
                realName: '',
                roleIds: []
            },
            options: [
                { value: [1], label: '有权限' },
                { value: [2], label: '无权限1' },
                { value: [3], label: '无权限2' },
                { value: [4], label: '无权限3' },
                { value: [5], label: '无权限4' },
                { value: [6], label: '无权限5' },
                { value: [7], label: '无权限6' }
            ],
            rules: {
                realName: [
                    { required: true, message: '必须有这个人', trigger: 'blur' }
                ],
                roleIds: [
                    { validator: this.validateRoleIds, trigger: 'change' }
                ]
            }
        };
    },
    methods: {
        submitForm() {
            this.$refs.form1.validate((valid) => {
                if (valid) {
                    guanliyuangai(this.form).then(res => {
                        console.log(res, 88822);
                        this.$emit("done");
                    }).catch(error => {
                        console.error(error);
                    });
                } else {
                    console.log('表单验证失败');
                    return false;
                }
            });
        },
        validateRoleIds(rule, value, callback) {
            if (!Array.isArray(value) || value.length === 0) {
                callback(new Error('角色不能空'));
            } else {
                callback();
            }
        }
    }
};
</script>